<template>
    <div class="comment-editor">
        <textarea
            class="comment-input"
            :placeholder="placeholder"
            :id="textId"
            v-model="content"
        ></textarea>
        <div class="opration">
            <div class="send-wrap">
                <div class="emoji-panel-btn" @click="showEmojiPanel">
                    <img src="~/assets/images/face.png" />
                </div>
                <div class="btn-wrap">
                    <el-button
                        round
                        size="small"
                        v-if="cancel"
                        @click="handleCancel"
                        >取消</el-button
                    >
                    <el-button
                        type="primary"
                        round
                        size="small"
                        @click="saveComment"
                    >
                        {{ level == 1 ? "发表评论" : "回复" }}
                    </el-button>
                </div>
            </div>

            <emoji-panel
                @emojiClick="appendEmoji"
                :active="isShowEmojiPanel"
            ></emoji-panel>
        </div>
    </div>
</template>

<script>
export default {
    name: "comment",
    props: {
        cancel: {
            type: Boolean,
            default: false,
        },
        placeholder: {
            type: String,
            default: "请输入您的评论",
        },
        level: {
            type: [Number, String],
            default: 1,
        },
    },
    data() {
        return {
            content: "", // 输入的内容
            isShowEmojiPanel: false,

            textId: "",
        };
    },
    mounted() {
        this.textId = "textpanel_" + Math.ceil(Math.random() * 100);
    },
    methods: {
        /* 发表评论 */
        saveComment() {
            let level = this.level;
            let content = this.content.replace(/:.*?:/g, this.emoji); // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
            this.$emit("saveComment", { content, level });
            // this.content = "";
            this.isShowEmojiPanel = false;
        },

        /* 取消按钮 */
        handleCancel() {
            this.$emit("onClick");
        },

        /* 打开表情框 */
        showEmojiPanel() {
            this.isShowEmojiPanel = !this.isShowEmojiPanel;
        },

        /* 生成表表情html */
        emoji(word) {
            // 生成html
            const type = word.substring(1, word.length - 1);
            return `<span class="emoji-item-common emoji-${type} emoji-size-small" ></span>`;
        },

        /* 点击表情 */
        appendEmoji(text) {
            const el = document.getElementById(this.textId);
            this.content = el.value + ":" + text + ":";
        },
    },
};
</script>
